<template>
	<view class="upgrade" @click="onBack">
		<view class="upgrade_box" @click.stop="kong">
			<view class="upgrade_box_con">
				<!-- <view class="upgrade_box_con_title">
					<view class="upgrade_box_con_title_left">
						<text class="upgrade_box_con_title_text">发现新版本</text>
						<text class="upgrade_box_con_title_text2">V{{pushVersion || ''}}</text>
					</view>
					<view class="upgrade_box_con_top">
						<image src="/static/update/huojian.png" mode=""></image>
					</view>
				</view> -->
				<view class="public">
					版本更新
				</view>
				<!-- <view class="upgrade_box_con_center">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 80px;">
						<rich-text :nodes="content"></rich-text>
					</scroll-view>
				</view> -->
			</view>
			<!-- 点击升级 -->
			<view class="upgrade_box_con_onsure" v-if="isupgrade">
				<view class=""  @click.stop="refuse">
					残忍拒绝
				</view>
				<view class=""  @click.stop="onsure">
					立即升级
				</view>
			</view>
			<!-- 开始升级 -->
			<view class="content" v-if="!isupgrade">
				<!-- 下载中 -->
				<view class="toast" v-show="!show">
					<text class="toast-text">
						正在下载中，请稍等...
					</text>
					<!-- <view class="progress">
						<cmd-progress :percent="downloadProgress" :strokeWidth="16" strokeShape="round" stroke-color="linear-gradient(to right, #2399fd, #2f88fe,#426eff)"></cmd-progress>
					</view> -->
				</view>
				<!-- 下载完成 -->
				<view class="upgrade_box_con_onsure_btn">
					<view class="" @click.stop="onInstall()" v-if="show">
						立即安装
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	// import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import checkForUpdates from '@/common/checkForUpdates.js'
	export default {
		data() {
			return {
				// 更新包下载进度
				downloadProgress: 100,
				// 当前版本号
				oldVersion: '',
				// 发现更新时新的版本号
				newVersion: '',
				// 显示安装
				show: false,
				// 版本更新内容
				content: '',
				// 下载完成后需要打开的文件路径
				fileName: '',
				isupgrade: true, // 是否升级
				scrollTop: 0,
				isback: false, // 是否阻止退出
				appDownloadAddress: '', // 安装包路径
				pushVersion: "", // 更新版本
				// 动态设置文字css
				activeColor: 'red',
				fontSize: 30
			}
		},
		onLoad(option) {
			let d = JSON.parse(option.data)
			// 下载路径
			this.appDownloadAddress = d.url
			// 下载内容
			// this.content = d.content
			// 更新版本
			this.pushVersion = d.newversion

		},
		// components: {
		// 	cmdProgress
		// },
		methods: {
			onBack() {
				uni.navigateBack()
			},
			kong() {
				// 给一个点击事件防止点击退出 
			},
			// 下载安装包
			toUpdate() {
				// 下载地址
				let wgtUrl = this.appDownloadAddress;
				// 安装包的保存路径
				let savePath = "_downloads/update/";
				// 创建下载任务
				var dtask = plus.downloader.createDownload(wgtUrl, {
					filename: savePath
				}, function(d, status) {});
				// 添加监听器
				dtask.addEventListener("statechanged", this.onStateChanged, false);
				// 开始下载
				dtask.start();
			},
			/**
			 * 下载任务的监听器
			 * @param {Object} dtask
			 * @param {Object} status
			 */
			onStateChanged(dtask, status) {
				if (dtask.state == 4 && status == 200) {
					uni.hideLoading()
					this.fileName = dtask.filename
					// 打开下载的安装包
					console.log(this.fileName)
					plus.runtime.openFile(dtask.filename, function(error) {
						// console.log("open file failed: " + error);
					});
					// 100% 出现安装按钮
					this.show = true
				} else {
					// 获得目标文件的大小
					let totalSize = dtask.totalSize;
					// 获得已下载的大小
					let downloadedSize = dtask.downloadedSize;
					// 计算进度
					// let dp = ((downloadedSize / totalSize) * 100).toFixed(0);
					// // console.log(dp)
					// this.downloadProgress = dp == 'NaN' ? 0 : dp;
					// this.downloadProgress = Number(this.downloadProgress)
					uni.showLoading({
						title:""
					})
					
				}
			},
			// // 防止退出
			// onBackPress(e) {
			// 	return true
			// },
			// 打开安装包
			onInstall() {
				plus.runtime.openFile(this.fileName, function(error) {
				});
			},
			// 取消升级
			onCancel() {
				uni.navigateBack()
			},
			// 确定升级
			onsure() {
				// #ifdef APP-PLUS
				if (plus.os.name.toLowerCase() === 'android') {
					this.isupgrade = !this.isupgrade //
					this.toUpdate() //下载安装包
				} else {
					let appleId='' //app的appleId
					plus.runtime.launchApplication({
						action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
					}, function(e) {
						console.log('Open system default browser failed: ' + e.message);
					});
				
				}
				// #endif
				
			},
			// 拒绝
			refuse(){
				// // #ifdef APP-PLUS
				// if (plus.os.name.toLowerCase() === 'android') {
				// 	plus.runtime.quit();
				// } else {
				// 	const threadClass = plus.ios.importClass("NSThread");
				// 	const mainThread = plus.ios.invoke(threadClass, "mainThread");
				// 	plus.ios.invoke(mainThread, "exit");
				// }
				// // #endif
				uni.navigateBack({
					
				})
			}
		},


	}
</script>

<style>
	page {
		font-size: 30rpx;
		line-height: 52rpx;
		background-color: rgba(0, 0, 0, 0);
	}
	.upgrade {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
	}
	.upgrade_box {
		border-radius: 12rpx;
		width: 550rpx;
		height: 630rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.upgrade_box_con {
		position: relative;
		top: -90rpx;
		background: url(/static/update/beijingtu.png);
		background-size: cover;
	}

	.upgrade_box_con_top image {
		width: 160rpx;
		height: 150rpx;
		margin-top: -60rpx;
		margin-left: 30rpx;
	}
	.upgrade_box_con_title_left{
		display: flex;
		flex-direction: column;
	}
	.upgrade_box_con_title {
		display: flex;
		padding: 30rpx 60rpx;
	}
	.upgrade_box_con_title_text{
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.upgrade_box_con_title_text2{
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.upgrade_box_con_center {
		padding: 10rpx 50rpx;
		color: #919191;
		font-size: 26rpx;
	}
	.upgrade_box_con_onsure {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #E5E5E5;
	}
	.upgrade_box_con_onsure view{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
	.upgrade_box_con_onsure view:nth-child(1){
		border-right: 1px solid #E5E5E5;
		color: #5A5A5A;
	}
	.upgrade_box_con_onsure view:nth-child(2){
		border-right: 1px solid #E5E5E5;
		color: #2795FE;
	}
	.content {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 130rpx;
		width: 100%;
		padding: 0 30rpx;
	}
	.toast-text {
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.public{
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 160rpx;
	}
	.upgrade_box_con_onsure_btn{
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.upgrade_box_con_onsure_btn view{
		font-size: 28rpx;
		width: 280rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(45deg, #1EA1FD 0%, #4668FF 100%);
		color: #FFFFFF;
		border-radius: 10rpx;
	}
</style>
